.cart {
  @apply fixed top-0 right-0 w-full h-screen max-w-2xl z-9 bg-pageText text-pageBG invisible pointer-events-none;
  height: calc(var(--vh, 1vh) * 100);
  will-change: transform;
  transition: visibility .2s .8s;

  @media (min-width: 700px) {
    border-left-width: 1px;
  }

  &.is-active {
    @apply visible pointer-events-auto;
    transition-delay: 0s;
  }

  &.is-updating {
    @apply cursor-wait !important;
  }

  &--backdrop {
    @apply fixed inset-0 z-8 bg-black bg-opacity-40 pointer-events-none opacity-0;
    transition: opacity .15s linear;

    &.is-active {
      @apply pointer-events-auto opacity-100;
      backdrop-filter: blur(6px);
    }
  }

  &--inner {
    @apply flex flex-col relative h-full w-full;
  }

  &--header {
    @apply flex items-center relative px-16 py-12 sm:px-32 sm:py-24 text-14 leading-150 font-semibold uppercase;

    &::after {
      @apply absolute inset-x-0 bottom-0 border-t;
      content: "";
    }
  }

  &--title {
    @apply flex items-center h-48 mr-auto;
  }

  &--count {
    @apply opacity-30 ml-8;
  }

  &--content {
    @apply flex-1 flex flex-col overflow-y-scroll p-16 sm:p-32;
  }

  &--footer {
    @apply relative px-16 pb-16 sm:px-32 sm:pb-32;
  }

  &--subtotal {
    @apply flex justify-between px-16 py-16 sm:py-32 border-t;

    span {
      @apply text-16 font-semibold;
    }
  }

  &--message {
    @apply mt-16 text-center text-12 sm:text-14 font-semibold;
  }

  &--empty {
    @apply my-auto pb-112 text-center;
  }
}

.cart-item {
  @apply flex relative;

  &:not(:last-child) {
    @apply mb-32 pb-32 border-b;
  }

  .is-updating & {
    @apply pointer-events-none;
  }

  &--photo {
    @apply flex-shrink-0 relative m-0 w-1/4 sm:w-1/3;
    max-width: 16rem;
  }

  &--details {
    @apply flex flex-col flex-grow pl-16;
  }

  &--header {
    @apply sm:flex;

    .price {
      @apply ml-auto;

      &--current {
        @apply sm:text-18 sm:leading-150 font-semibold;
      }
    }
  }

  &--title {
    @apply sm:pr-48;
  }

  &--variant {
    @apply mb-4 text-12 leading-160 tracking-wider font-semibold uppercase sm:text-14 sm:leading-160;
  }

  &--name {
    @apply mb-8 sm:mb-16 text-20 sm:text-30;
  }

  &--link {
    @apply block text-current;

    &::after {
      @apply block absolute inset-0 z-1;
      content: "";
    }
  }

  &--title {
    @apply flex-1 m-0;
  }

  &--price {
    @apply ml-16;
  }

  &--tools {
    @apply flex justify-between items-baseline relative z-1 mt-auto pt-24;
  }
}